<template>
  <div>
    <!-- 导航栏 -->
    <div class="nav">
      <div @click="left()">
        <van-icon name="arrow-left" size="3rem" />
      </div>
      <div class="nav-text" v-text="$route.query.second"></div>
      <div @click="right()">
        <van-icon name="search" size="3rem" />
      </div>
    </div>
    <!-- 排序方式 -->
    <div class="resort">
      <div>综合</div>
      <div>销量</div>
      <div>价格</div>
      <div>新品</div>
    </div>
  <!-- 二级分类下的商品展示  -->
   <div  class="good-all">
      <div @click="goodDetail(index)" class="goods-detail" v-for="(item,index) in goods" :key="index">
        <div>
          <img class="good-img" :src="item.productPicList[0]" />
        </div>
        <div class="good-name">{{item.name}}</div>
        <div class="good-price">
          <div class="price">￥{{item.price}}</div>
          <div class="oldprice">￥{{item.oldPrice}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  mounted() {
    console.log('请求id',this.$route.query.subheadId);
    console.log('目录名字',this.$route.query.second);
       axios({
        method: 'post',
        url: '/api/productByTwo/' + this.$route.query.subheadId
      }).then(res => {
        console.log('二级分类下的商品数据',res);
        this.goods = res.data.data;
        console.log('商品数据数组详情',this.goods);
      });
  },
  data() {
    return {
      goods: [],
      titleIndex: '',
      num1: this.$route.query.num
    };
  },
  methods: {
    left() {
      this.$router.push({
        name: '分类',
        query: {
         id:0
        }
      });
    }
  }
};
</script>
<style scoped>
.nav {
  border-bottom: 0.1rem solid rgb(230, 227, 227);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
}
.nav-text {
  font-size: 2rem;
}
.resort {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: space-evenly;
}
.price {
  margin-left: 2rem;
  color: orangered;
}
.oldprice {
  color: gray;
  text-decoration-line: line-through;
  margin-left: 2rem;
}
.good-all {
  width: 37.5rem;
  background-color: rgb(250, 248, 248);
  display: flex;
  justify-content: start;
}
.good-name {
  height: 3rem;
  text-align: center;
}
.goods-detail {
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-color: white;
  width: 18rem;
  height: 25rem;
  display: flex;
  flex-direction: column;
}
.good-price {
  display: flex;
}
.good-img {
  width: 15rem;
  height: 15rem;
  margin-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 1rem;
  margin-left: 1.5rem;
}
</style>